<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="admin.*"%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="static/css/manage.css">
    <link rel="icon" href="./static/img/tx.png" type="img/x-icon"/>
    <title>manage</title>


    <link rel="icon" type="image/png" href="./static/img/tx.png" type="image/x-ico"\>
    <link rel="stylesheet" href="Editor/css/style.css" />
    <link rel="stylesheet" href="Editor/css/editormd.css" />
    <style>
        @font-face { 
        font-family: "roud666";
        src: url("static\\font\\Harley.ttf"); 
        }
        #headBox{
            position: relative;
            width: 100%;
            height: 60px;
            line-height:60px;
            text-align:center;
            background-image: linear-gradient(120deg,rgb(140, 0, 255),rgb(1, 253, 220));
            color: rgb(255, 255, 255);
            font-size:30px;
            font-family:"roud666";
            font-weight:300;
        }
    </style>


</head>
<body>
    <!-- 页面头部行 -->
    <div id="topBox">
        <div id=topboxleft>
        <h2>后台管理系统</h2>
        <p name="testDel" style="display:none"></p>
    </div>
    <div id="topboxright">
        <h2><span>你好，</span><span class="helloName"></span></h2>
        <img src="static/img/tx.png" />

    </div>
    </div>
    <div id="left-box">
            <div id="manager">
            <img src="static/img/tx.png"/>
            <p id="managerName"></p>
        </div>
        <ul id="ul">
            <li v-for="(item,index) in arr">
               {{item}}
            </li>
        </ul>
    </div>
    <div id="right-box">
        
        <div id="managerBox" class="blogManage">
            <table class="blogm">

            </table>
            
            <div class="pages"><span class="backPage"><</span><span class="pagesnum">1</span><span class="nextPage">></span></div>
            
            <a href="editor.jsp" class="compositionBlog">前往博客创作>>>>>>>></a>
        </div>
        <div id="managerBox" class="describeManage" style="display: none;">
            <div id="describeManage-main">
                <img src="static/img/tip.png">
                <p>暂不支持，请留意通知</p>
            </div>
        </div>
        
        <div id="managerBox" class="resourceManage" style="display: none;">
            <table class="resourceTable">

            </table>
            <div class="pages"><span class="backPage2"><</span><span class="pagesnum2">1</span><span class="nextPage2">></span></div>
            <a href="resourcesUpload.jsp" class="compositionBlog">资源上传>>>>>>>></a>
        </div>
        
        <div id="managerBox" class="exitManage" style="display: none;">
            <div id="popup-dialog" class="popup-dialog"><h3 id="popup-dialog-title">退出后台管理</h3><p id="popup-dialog-msg" class="message ">你确认要退出后台管理系统吗？</p><div class="ui-grid-a group">
                <div class="ui-block-a" style="color:red">确认</div><div class="ui-block-b">取消</div></div></div>
        </div>




    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // vue快速创建菜单列表
        var list=["博客管理","简介管理","资源管理","退出"]
        var app=new Vue({
            el: "#ul",
            data: {
                arr:list
            }
        })
    </script>
    

    
    <script>
        // 菜单列表项切换监听
        var lis=document.querySelectorAll("#ul li");

        var managerBoxs= document.querySelectorAll("#managerBox");
        for(var i=0;i<lis.length;i++){
            lis[i].setAttribute("index",i);
        }
        lis[0].setAttribute("class","currentLi");
        for(var i=0;i<lis.length;i++){
            lis[i].addEventListener("click",function(){
                var index=this.getAttribute("index");
                for(var j=0;j<lis.length;j++){
                    lis[j].removeAttribute("class");
                    managerBoxs[j].style.display="none";
                }
                this.setAttribute("class","currentLi");
                managerBoxs[index].style.display="block";

            })
        }
        // lis[3].addEventListener("click",function(){
        //     confirm("确认退出？");
        // })
   

    </script>
    

    <script>
        // headbox固定高度60px，为了正好让页面刚刚占满全屏，添加监听
        var leftbox = document.querySelector("#left-box");
        var rightbox = document.querySelector("#right-box");
        var hideBox= document.querySelector("#hideBox");
        var body = document.querySelector("body");
        var h=(body.offsetHeight-60)+"px";
        leftbox.style.height=h;
        rightbox.style.height=h;
     
    </script>
    <script>
    <%
    	getBlogData gbd=new getBlogData();
    	List<Blog> dataList=gbd.getData();
    %>
        // 博客展示
        var table = document.querySelector(".blogManage table");
        var initialblogData=<%= dataList %>
        var blogData=initialblogData.reverse();
        

        var nextPage= document.querySelector(".nextPage");
        var pagesnum= document.querySelector(".pagesnum");
        var backPage= document.querySelector(".backPage");

	//博客数据分页
        function ff(){//按页码展示数据
            var strblog='<tr id="tableHead"><td>序号</td><td>标题</td><td>时间</td><td>操作</td></tr>';
            var currebtPage=parseInt(pagesnum.innerHTML);
            var min=3*currebtPage-3;
            var max=0;
            if((3*currebtPage)>blogData.length){
                max=blogData.length-1;
            }else{
                max=3*currebtPage-1;
            }
            for(var i=min; i <=max; i++) {
            strblog+= '<tr id="tableMain"><td>'+(i+1)+'</td><td>'+blogData[i].title+'</td><td>'+blogData[i].time+'</td><td><a href="del.jsp?tb=blogdata&id='+blogData[i].id+'">删除</a></td></tr>';
            table.innerHTML=strblog;
            }
        }
        ff();
		//按数据量及每页展示数据数设置最大最小页码
        nextPage.addEventListener("click",function(){
            var currebtPage=parseInt(pagesnum.innerHTML);
            var max = Math.ceil((blogData.length)/3);
            if(currebtPage==max){
                alert("已经是最后一页了~")
            }else{
                currebtPage+=1;
                pagesnum.innerHTML=currebtPage;
                ff();
            }        })
        backPage.addEventListener("click",function(){
            var currebtPage=parseInt(pagesnum.innerHTML);
            if(currebtPage==1){
                alert("已经是第一页了哟~");
            }else{
                currebtPage-=1;
                pagesnum.innerHTML=currebtPage;
                ff();
            }

        })

        // 退出确认框
        var exitCancel= document.querySelector(".ui-block-b");
        exitCancel.addEventListener("click",function(){
            lis[0].click();
        });
        var exitConfirm= document.querySelector(".ui-block-a");
        exitConfirm.addEventListener("click",function(){
            alert("退出成功！");
            location.href="/quit";
        })
        <%
        	String name=request.getParameter("name");
        %>
        var managerName=document.querySelector("#managerName");
        var helloName=document.querySelector(".helloName");
        var name="<%= name %>";
        managerName.innerHTML=name;
        helloName.innerHTML=name;
    </script>
    
    
<!-- 资源管理模块 -->
    <script>
    <%
	    GetResources grs=new GetResources();
		List<Resources> ls=grs.getData();
    %>
        var tableR = document.querySelector(".resourceTable");
        var initialrsData=<%= ls %>;
        var rsData=initialrsData.reverse();


        var nextPage2= document.querySelector(".nextPage2");
        var pagesnum2= document.querySelector(".pagesnum2");
        var backPage2= document.querySelector(".backPage2");


        function f1(){
            var strrs='<tr id="tableHead"><td>序号</td><td>描述</td><td>URL</td><td>提取码</td><td>操作</td><tr>';
            var currebtPage2=parseInt(pagesnum2.innerHTML);
            var min2=3*currebtPage2-3;
            var max2=0;
            if((3*currebtPage2)>rsData.length){
                max2=rsData.length-1;
            }else{
                max2=3*currebtPage2-1;
            }
            for(var i=min2; i <=max2; i++) {
                strrs+= '<tr id="tableMain"><td>'+(i+1)+'</td><td>'+rsData[i].title+'</td><td>'+rsData[i].url+'</td><td>'+rsData[i].code+'</td><td><a href="del.jsp?tb=resources&id='+rsData[i].id+'">删除</a></td></tr>';
                tableR.innerHTML=strrs;
            }
        }
        f1();

        nextPage2.addEventListener("click",function(){
            var currebtPage2=parseInt(pagesnum2.innerHTML);
            var max2= Math.ceil((rsData.length)/3);
            if(currebtPage2==max2){
                alert("已经是最后一页了~")
            }else{
                currebtPage2+=1;
                pagesnum2.innerHTML=currebtPage2;
                f1();
            }        })
        backPage2.addEventListener("click",function(){
            var currebtPage2=parseInt(pagesnum2.innerHTML);
            if(currebtPage2==1){
                alert("已经是第一页了哟~");
            }else{
                currebtPage2-=1;
                pagesnum2.innerHTML=currebtPage2;
                f1();
            }

        })
    </script>

</body>
</html>